<template>
    <view class="comments-container">
      <!-- 公司信息头部 -->
      <view class="company-header">
        <image :src="companyInfo.logo" class="company-logo" alt="公司logo"></image>
        <view class="company-info">
          <view class="company-name">{{ companyInfo.name }}</view>
          <view class="company-desc">{{ companyInfo.industry }} · {{ companyInfo.scale }}</view>
        </view>
        <button class="write-review" @click="navigateToPublish">
          <uni-icons type="edit" size="24" color="white"></uni-icons>
          <text>写评价</text>
        </button>
      </view>
      
      <!-- 评分概览 -->
      <view class="rating-overview">
        <view class="overall-score">
          <text class="score">{{ companyRating.overall }}</text>
          <text class="unit">分</text>
        </view>
        <view class="rating-details">
          <view class="rating-item" v-for="(item, index) in companyRating.details" :key="index">
            <text class="rating-label">{{ item.label }}</text>
            <view class="rating-stars">
              <uni-rate 
                :value="item.score" 
                :max="5" 
                disabled 
                active-color="#FF9900"
                size="24"
              ></uni-rate>
            </view>
            <text class="rating-value">{{ item.score }}</text>
          </view>
        </view>
      </view>
      
      <!-- 筛选条件 -->
      <view class="filter-bar">
        <scroll-view scroll-x="true" class="filter-scroll">
          <view 
            class="filter-item" 
            v-for="(filter, index) in filterOptions" 
            :key="index"
            :class="{ 'active': activeFilter === index }"
            @click="activeFilter = index"
          >
            {{ filter }}
          </view>
        </scroll-view>
      </view>
      
      <!-- 评价列表 -->
      <view class="comments-list">
        <view class="comment-item" v-for="(comment, index) in filteredComments" :key="index">
          <view class="comment-header">
            <view class="user-info">
              <uni-icons type="person" size="40" color="#ccc"></uni-icons>
              <view class="user-detail">
                <view class="user-name">{{ comment.userName }}</view>
                <view class="user-meta">
                  <text class="position">{{ comment.position }}</text>
                  <text class="time">{{ comment.time }}</text>
                </view>
              </view>
            </view>
            <view class="comment-rating">
              <uni-rate 
                :value="comment.rating" 
                :max="5" 
                disabled 
                active-color="#FF9900"
                size="20"
              ></uni-rate>
            </view>
          </view>
          
          <view class="comment-content">
            <view class="comment-item" v-if="comment.advantages">
              <view class="comment-label">优点：</view>
              <view class="comment-text">{{ comment.advantages }}</view>
            </view>
            <view class="comment-item" v-if="comment.disadvantages">
              <view class="comment-label">缺点：</view>
              <view class="comment-text">{{ comment.disadvantages }}</view>
            </view>
            <view class="comment-item" v-if="comment.suggestion">
              <view class="comment-label">建议：</view>
              <view class="comment-text">{{ comment.suggestion }}</view>
            </view>
          </view>
          
          <view class="comment-actions">
            <button class="action-btn" @click="likeComment(index)">
              <uni-icons 
                type="thumbs-up" 
                size="24" 
                :color="comment.liked ? '#36D' : '#999'"
              ></uni-icons>
              <text>{{ comment.likes }}</text>
            </button>
            <button class="action-btn" @click="showCommentDialog(comment.id)">
              <uni-icons type="chatbubble" size="24" color="#999"></uni-icons>
              <text>{{ comment.replyCount }}</text>
            </button>
            <button class="action-btn" @click="reportComment(comment.id)">
              <uni-icons type="alert" size="24" color="#999"></uni-icons>
              <text>举报</text>
            </button>
          </view>
        </view>
        
        <!-- 无数据提示 -->
        <view class="empty-tip" v-if="filteredComments.length === 0">
          <uni-icons type="empty" size="60" color="#ccc"></uni-icons>
          <text>暂无相关评价</text>
        </view>
      </view>
      
      <!-- 加载更多 -->
      <view class="load-more" v-if="filteredComments.length > 0" @click="loadMoreComments">
        <text>加载更多</text>
        <uni-icons type="spinner" size="24" color="#36D" :loading="isLoading"></uni-icons>
      </view>
    </view>
  </template>
  
  <script>
  export default {
    data() {
      return {
        companyId: '',
        companyInfo: {},
        companyRating: {},
        allComments: [],
        filterOptions: ['全部', '最新', '好评', '差评', '有图'],
        activeFilter: 0,
        isLoading: false
      };
    },
    onLoad(options) {
      // 获取公司ID
      this.companyId = options.companyId || '1';
      // 加载公司信息
      this.loadCompanyInfo();
      // 加载评分数据
      this.loadCompanyRating();
      // 加载评价列表
      this.loadComments();
    },
    computed: {
      // 根据筛选条件过滤评价
      filteredComments() {
        switch (this.activeFilter) {
          case 0: // 全部
            return this.allComments;
          case 1: // 最新
            return [...this.allComments].sort((a, b) => new Date(b.time) - new Date(a.time));
          case 2: // 好评
            return this.allComments.filter(comment => comment.rating >= 4);
          case 3: // 差评
            return this.allComments.filter(comment => comment.rating <= 2);
          case 4: // 有图
            return this.allComments.filter(comment => comment.images && comment.images.length > 0);
          default:
            return this.allComments;
        }
      }
    },
    methods: {
      // 加载公司信息
      loadCompanyInfo() {
        setTimeout(() => {
          this.companyInfo = {
            id: this.companyId,
            name: '深圳市小富科技有限公司',
            logo: 'https://picsum.photos/80/80?random=10',
            industry: '互联网/IT',
            scale: '500-1000人'
          };
        }, 500);
      },
      
      // 加载公司评分
      loadCompanyRating() {
        setTimeout(() => {
          this.companyRating = {
            overall: 4.2,
            details: [
              { label: '薪资待遇', score: 4.5 },
              { label: '工作环境', score: 4.3 },
              { label: '企业文化', score: 3.8 },
              { label: '发展前景', score: 4.6 }
            ]
          };
        }, 600);
      },
      
      // 加载评价列表
      loadComments() {
        this.isLoading = true;
        setTimeout(() => {
          this.allComments = [
            {
              id: '101',
              userName: '职场新人',
              position: '前端开发 · 工作1年',
              time: '2023-06-18',
              rating: 5,
              advantages: '公司氛围很好，团队年轻有活力，技术氛围浓厚，乐于分享。薪资水平在行业内属于中上，福利待遇完善，五险一金齐全，还有补充商业保险。',
              disadvantages: '项目比较紧张的时候会有加班，但整体可控。晋升机制还不够完善，需要进一步优化。',
              suggestion: '希望能增加更多的技术培训机会，完善晋升通道。',
              likes: 28,
              liked: false,
              replyCount: 5,
              images: [
                'https://picsum.photos/200/200?random=20',
                'https://picsum.photos/200/200?random=21'
              ]
            },
            {
              id: '102',
              userName: '老员工',
              position: '产品经理 · 工作3年',
              time: '2023-06-10',
              rating: 3,
              advantages: '公司产品方向不错，市场前景广阔。同事关系简单，没有太多办公室政治。',
              disadvantages: '管理有些混乱，流程不够规范。薪资涨幅比较慢，低于行业平均水平。',
              suggestion: '建议优化管理流程，提高薪资竞争力。',
              likes: 15,
              liked: false,
              replyCount: 3
            },
            {
              id: '103',
              userName: '匿名用户',
              position: 'UI设计师 · 工作2年',
              time: '2023-05-28',
              rating: 4,
              advantages: '弹性工作制，不需要严格打卡，工作生活平衡做得不错。团队沟通顺畅，协作效率高。',
              disadvantages: '公司位置有点偏，交通不太方便。偶尔会有需求变更比较频繁的情况。',
              suggestion: '希望能提供班车服务，减少需求变更频率。',
              likes: 22,
              liked: true,
              replyCount: 0,
              images: [
                'https://picsum.photos/200/200?random=22'
              ]
            }
          ];
          this.isLoading = false;
        }, 1000);
      },
      
      // 加载更多评价
      loadMoreComments() {
        if (this.isLoading) return;
        
        this.isLoading = true;
        setTimeout(() => {
          const newComments = [
            {
              id: '104',
              userName: '技术达人',
              position: '后端开发 · 工作5年',
              time: '2023-05-15',
              rating: 5,
              advantages: '技术栈比较新，有很多学习和成长的机会。公司愿意投入资源做技术研发，不盲目追求业务速成。',
              disadvantages: '福利方面比较基础，没有太多额外的惊喜。',
              suggestion: '可以增加一些团队建设活动，增强团队凝聚力。',
              likes: 35,
              liked: false,
              replyCount: 8
            },
            {
              id: '105',
              userName: '职场观察家',
              position: '人力资源 · 工作4年',
              time: '2023-05-01',
              rating: 2,
              advantages: '招聘流程比较规范，面试体验不错。',
              disadvantages: '内部管理混乱，部门墙严重。绩效考核不公平，存在裙带关系。',
              suggestion: '建议重构绩效管理体系，打破部门壁垒。',
              likes: 7,
              liked: false,
              replyCount: 12
            }
          ];
          
          this.allComments = [...this.allComments, ...newComments];
          this.isLoading = false;
        }, 1500);
      },
      
      // 点赞评价
      likeComment(index) {
        const comment = this.filteredComments[index];
        if (comment.liked) {
          comment.likes--;
        } else {
          comment.likes++;
        }
        comment.liked = !comment.liked;
      },
      
      // 查看评论回复
      showCommentDialog(commentId) {
        uni.showModal({
          title: '评论详情',
          content: '评论回复功能开发中',
          showCancel: false
        });
      },
      
      // 举报评论
      reportComment(commentId) {
        uni.showActionSheet({
          itemList: ['内容不实', '人身攻击', '广告骚扰', '其他原因'],
          success: function(res) {
            uni.showToast({
              title: '举报已提交，感谢您的反馈',
              icon: 'none'
            });
          }
        });
      },
      
      // 跳转到发布评价页
      navigateToPublish() {
        uni.navigateTo({
          url: `/pages/review/publish?companyId=${this.companyId}&companyName=${this.companyInfo.name}`
        });
      }
    }
  };
  </script>
  
  <style scoped>
  .comments-container {
    background-color: #f5f5f5;
    min-height: 100vh;
  }
  
  /* 公司信息头部 */
  .company-header {
    display: flex;
    align-items: center;
    padding: 20rpx;
    background-color: #fff;
    border-bottom: 1px solid #eee;
  }
  
  .company-logo {
    width: 100rpx;
    height: 100rpx;
    border-radius: 8rpx;
    margin-right: 20rpx;
  }
  
  .company-info {
    flex: 1;
  }
  
  .company-name {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 10rpx;
  }
  
  .company-desc {
    font-size: 26rpx;
    color: #666;
  }
  
  .write-review {
    background-color: #36D;
    color: white;
    border-radius: 30rpx;
    padding: 15rpx 30rpx;
    font-size: 26rpx;
    display: flex;
    align-items: center;
  }
  
  .write-review text {
    margin-left: 10rpx;
  }
  
  /* 评分概览 */
  .rating-overview {
    display: flex;
    padding: 30rpx;
    background-color: #fff;
    border-bottom: 1px solid #eee;
  }
  
  .overall-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 200rpx;
  }
  
  .score {
    font-size: 60rpx;
    font-weight: bold;
    color: #FF6600;
  }
  
  .unit {
    font-size: 28rpx;
    color: #666;
    margin-top: 10rpx;
  }
  
  .rating-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
  
  .rating-item {
    display: flex;
    align-items: center;
  }
  
  .rating-label {
    font-size: 26rpx;
    color: #666;
    width: 140rpx;
  }
  
  .rating-stars {
    flex: 1;
    margin: 0 10rpx;
  }
  
  .rating-value {
    font-size: 26rpx;
    color: #FF6600;
    width: 60rpx;
    text-align: right;
  }
  
  /* 筛选条件 */
  .filter-bar {
    background-color: #fff;
    padding: 15rpx 0;
    border-bottom: 1px solid #eee;
  }
  
  .filter-scroll {
    white-space: nowrap;
    padding: 0 20rpx;
  }
  
  .filter-item {
    display: inline-block;
    padding: 10rpx 25rpx;
    margin-right: 10rpx;
    font-size: 28rpx;
    border-radius: 30rpx;
  }
  
  .filter-item.active {
    background-color: #36D;
    color: white;
  }
  
  /* 评价列表 */
  .comments-list {
    padding: 20rpx;
  }
  
  .comment-item {
    background-color: #fff;
    border-radius: 10rpx;
    padding: 25rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  }
  
  .comment-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20rpx;
  }
  
  .user-info {
    display: flex;
  }
  
  .user-detail {
    margin-left: 15rpx;
  }
  
  .user-name {
    font-size: 28rpx;
    font-weight: bold;
    color: #333;
  }
  
  .user-meta {
    display: flex;
    margin-top: 5rpx;
    font-size: 24rpx;
    color: #999;
  }
  
  .position {
    margin-right: 20rpx;
  }
  
  .comment-content {
    margin-bottom: 20rpx;
  }
  
  .comment-item {
    margin-bottom: 15rpx;
  }
  
  .comment-label {
    font-size: 28rpx;
    color: #36D;
    font-weight: bold;
    margin-right: 10rpx;
  }
  
  .comment-text {
    font-size: 28rpx;
    color: #333;
    line-height: 1.6;
  }
  
  .comment-actions {
    display: flex;
    justify-content: flex-start;
    border-top: 1px solid #f5f5f5;
    padding-top: 15rpx;
  }
  
  .action-btn {
    display: flex;
    align-items: center;
    background: none;
    border: none;
    padding: 0 20rpx 0 0;
    font-size: 26rpx;
    color: #999;
  }
  
  .action-btn text {
    margin-left: 5rpx;
  }
  
  /* 无数据提示 */
  .empty-tip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100rpx 0;
    color: #ccc;
  }
  
  .empty-tip text {
    font-size: 28rpx;
    margin-top: 20rpx;
  }
  
  /* 加载更多 */
  .load-more {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30rpx;
    font-size: 28rpx;
    color: #36D;
  }
  
  .load-more text {
    margin-right: 10rpx;
  }
  </style>
      